<template>
    <div>
        <PageHeader />
        <PageNav />
        <div class="list">
            <div class="box">
                <div class="path">首页 / 个人中心 / 我的订单</div>
                <div class="detail">

                    <!--显示列表-->
                    <div style="margin-top:10px;">
                        <el-tabs type="border-card" v-model="activeName" @tab-click="eventTabsClick">
                            <el-tab-pane label="全部订单" name="-1"></el-tab-pane>
                            <el-tab-pane label="待付款" name="0"></el-tab-pane>
                            <el-tab-pane label="待发货" name="1"></el-tab-pane>
                            <el-tab-pane label="已完成" name="2"></el-tab-pane>
                            <el-tab-pane label="已取消" name="3"></el-tab-pane>
                        </el-tabs>

                        <div style="border-top:1px solid #dcdcdc;border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc; text-align: left;margin-bottom: 20px;"
                            v-for="(item, index) in newOrderData" :key="index">
                            <div class="order-title">
                                下单时间：{{ item.createdTime }} 订单编号：{{ item.orderNo }}
                            </div>

                            <div>
                                <el-row>
                                    <el-col :span="14" class="item">
                                        <el-row>
                                            <el-col :span="4">图片</el-col>
                                            <el-col :span="20">商品名称</el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="3" class="item statue">
                                        <span v-if="item.orderStatue == 0">待付款</span>
                                        <span v-else-if="item.orderStatue == 1">待发货</span>
                                        <span v-else-if="item.orderStatue == 2">已完成</span>
                                        <span v-else-if="item.orderStatue == 3">已取消</span>
                                    </el-col>
                                    <el-col :span="4" class="item price">
                                        ￥{{ item.payTotal.toFixed(2) }}
                                    </el-col>
                                    <el-col :span="3" class="item opt">
                                        <span v-if="item.orderStatue == 0">
                                            <el-button size="mini" type="danger" @click="pay(item.orderNo,item.payTotal)">立即付款</el-button>
                                        </span>
                                        <span v-else-if="item.orderStatue == 1">待收货</span>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>

                    </div>

                    <!--分页-->
                    <div style="margin-top:20px;">分页</div>
                </div>
            </div>
        </div>
        <PageCustom />
        <PageFooter />
    </div>
</template>



<script>
//引入组件页面
import PageNav from '@/components/PageNav.vue'
import PageHeader from '@/components/PageHeader.vue'
import PageCustom from '@/components/PageCustom.vue'
import PageFooter from '@/components/PageFooter.vue'

export default {
    components: {
        //声明刚才我们引入的页面，是一个组件
        PageNav, PageHeader, PageCustom, PageFooter
    },
    data() {
        return {
            activeName: '-1',
            //模拟数据中，订单状态：0待付款，1待收货，2已完成，3已取消
            orderData: [
                {
                    id: 1,
                    orderNo: '12346530641',
                    orderDate: '2022/12/25 23:25:54',
                    total: 39.00,
                    statue: 0,
                    goods: [
                        { goodsId: '1', goodsName: '女式超柔软拉毛运动开衫1', goodsNumber: 2, goodsPrice: 19.99 }
                    ]
                },
                {
                    id: 2,
                    orderNo: '12346554530641',
                    orderDate: '2022/12/25 23:25:54',
                    total: 39.00,
                    statue: 0,
                    goods: [
                        { goodsId: '1', goodsName: '女式超柔软拉毛运动开衫2', goodsNumber: 2, goodsPrice: 19.99 }
                    ]
                },
                {
                    id: 3,
                    orderNo: '12346591030641',
                    orderDate: '2022/12/25 23:25:54',
                    total: 39.00,
                    statue: 1,
                    goods: [
                        { goodsId: '1', goodsName: '女式超柔软拉毛运动开衫3', goodsNumber: 2, goodsPrice: 19.99 }
                    ]
                },
                {
                    id: 4,
                    orderNo: '1288522346530641',
                    orderDate: '2022/12/25 23:25:54',
                    total: 39.00,
                    statue: 1,
                    goods: [
                        { goodsId: '1', goodsName: '女式超柔软拉毛运动开衫4', goodsNumber: 2, goodsPrice: 19.99 }
                    ]
                },
                {
                    id: 5,
                    orderNo: '12346530641667954',
                    orderDate: '2022/12/25 23:25:54',
                    total: 39.00,
                    statue: 2,
                    goods: [
                        { goodsId: '1', goodsName: '女式超柔软拉毛运动开衫5', goodsNumber: 2, goodsPrice: 19.99 }
                    ]
                },
                {
                    id: 6,
                    orderNo: '1234625552530641',
                    orderDate: '2022/12/25 23:25:54',
                    total: 39.00,
                    statue: 2,
                    goods: [
                        { goodsId: '1', goodsName: '女式超柔软拉毛运动开衫6', goodsNumber: 2, goodsPrice: 19.99 }
                    ]
                },
                {
                    id: 7,
                    orderNo: '123465888830641',
                    orderDate: '2022/12/25 23:25:54',
                    total: 39.00,
                    statue: 3,
                    goods: [
                        { goodsId: '1', goodsName: '女式超柔软拉毛运动开衫7', goodsNumber: 2, goodsPrice: 19.99 }
                    ]
                },
                {
                    id: 8,
                    orderNo: '1239922246530641',
                    orderDate: '2022/12/25 23:25:54',
                    total: 39.00,
                    statue: 3,
                    goods: [
                        { goodsId: '1', goodsName: '女式超柔软拉毛运动开衫8', goodsNumber: 2, goodsPrice: 19.99 },
                        { goodsId: '2', goodsName: '女式超柔软拉毛运动开衫9', goodsNumber: 1, goodsPrice: 19.99 }
                    ]
                }
            ],

            newOrderData: [],
            orderStatue: -1,
        };
    },
    mounted() {
        this.onloadData()
    },
    methods: {
        eventTabsClick(tab) {
            //这个name的值，是我人为定义的状态对应的值
            //console.log(tab.name);

            // if (tab.name != "-1") {
            //     let d = this.orderData.filter(x => x.statue == tab.name)
            //     this.newOrderData = d
            // }
            // else{
            //     this.newOrderData = this.orderData
            // }
            this.orderStatue = tab.name
            this.onloadData()
        },
        onloadData() {
            let memberid = localStorage.getItem('liangcaigen')
            let url = 'http://localhost:5286/order?memberid=' + memberid + '&pageIndex=1&pageSize=10&orderStatue=' + this.orderStatue
            this.$http.get(url).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    //this.orderData = res.data.data

                    this.newOrderData = res.data.data
                }
            })
        },
        pay(orderNo,total){
            this.$router.push('/car/pay/test?orderNo='+orderNo+'&total='+total)
        }
    }
}
</script>


<style scoped>
.order-title {

    font-size: 12px;
    background: rgba(249, 249, 249, 1);
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #dcdcdc;
    padding-left: 15px;
}

.item {
    text-align: center;
    font-size: 13px;
}

.statue {
    border-left: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
}


.price {
    font-size: 30px;
    color: red;
}

.opt {

    border-left: 1px solid #dcdcdc;
}
</style>